<template>
  <div class="my-wrap">
    <van-sticky>
      <div class="my-time" v-if="state.cancelDate">
        {{ moment(state.cancelDate).format("YYYY-MM-DD HH:mm:ss") }}
      </div>
    </van-sticky>
    <van-pull-refresh v-model="state.refreshing" @refresh="onRefresh">
      <div class="list-group">
        <van-list
          v-model:loading="state.loading"
          :finished="state.finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <template v-if="state.scanList.length">
            <div
              v-for="(item, index) in state.scanList"
              :key="index"
              :class="index ? 'mg-top' : ''"
            >
              <van-cell-group inset class="my-cell-group">
                <div
                  :class="[
                    'group-checked',
                    item.checked ? 'group-checked_active' : '',
                  ]"
                  @click="onChecked(item, index)"
                >
                  <van-cell
                    custom-class="my-cell-item my-cell-top"
                    :border="false"
                    title="核销状态"
                  >
                    <van-tag :type="item.statusType" round>
                      {{ item.status_desc }}
                    </van-tag>
                  </van-cell>
                  <van-cell
                    custom-class="my-cell-item"
                    :border="false"
                    title="标签码"
                    :value="item.labelCode"
                  >
                  </van-cell>
                  <van-cell
                    custom-class="my-cell-item"
                    :border="false"
                    title="标签码名称"
                    :value="item.labelName"
                  ></van-cell>
                  <van-cell
                    custom-class="my-cell-item"
                    :border="false"
                    title="客户积分数"
                    :value="item.custPoints"
                  ></van-cell>
                  <van-cell
                    custom-class="my-cell-item"
                    :border="false"
                    title="业务员积分数"
                    :value="item.salemanPoints"
                  ></van-cell>
                  <van-cell
                    custom-class="my-cell-item my-cell-bottom"
                    :border="false"
                    title="核销时间"
                    :value="item.cancelDate"
                  ></van-cell>
                </div>
              </van-cell-group>
            </div>
          </template>
          <van-empty v-else description="暂无数据" />
        </van-list>
      </div>
    </van-pull-refresh>

    <van-action-bar placeholder>
      <div class="footer">
        <div class="my-log-tips">
          共 {{ state.count }} 个 客户积分数 {{ state.custPoints }} 业务员积分数
          {{ state.salemanPoints }}
        </div>
        <div class="my-log-tips">
          总积分数 {{ state.custPoints + state.salemanPoints }}
        </div>
        <van-button type="primary" round size="large" @click="onCancelStatus">
          核销
        </van-button>
      </div>
    </van-action-bar>

    <van-dialog
      v-model:show="state.showDialog"
      title="核销提示"
      confirmButtonText="我知道啦"
      @confirm="onClose"
    >
      <div class="scanResultList" v-if="state.scanResultList.length">
        <van-cell
          class="my-cell-item my-cell-bottom"
          v-for="(item, index) in state.scanResultList"
          :key="index"
          :border="false"
          :title="item.labelCode"
          :label="item.failReason"
        >
        </van-cell>
      </div>
      <van-empty v-else description="暂无数据" />
    </van-dialog>

    <backEvent @handlepaly="handlepaly"></backEvent>
  </div>
</template>
<script setup>
import { reactive, onMounted } from "vue";
import { closeToast, showLoadingToast } from "vant";
import { useRoute, useRouter } from "vue-router";
import moment from "moment";
import api from "@/api/label.js";

const route = useRoute();
const router = useRouter();
const state = reactive({
  scanList: [],
  statusTypeList: {
    0: {
      statusName: "待核销",
      statusType: "primary",
    },
    1: {
      statusName: "已核销",
      statusType: "success",
    },
    2: {
      statusName: "核销失败",
      statusType: "danger",
    },
  },
  labelCodes: [],
  pageSize: 10, //当前多少页
  pageNo: 1, //现在多少页
  total: 0, //最后一页
  loading: false,
  finished: false,
  cancelDate: "",
  showDialog: false,
  scanResultList: [],
  batchno: undefined,
  count: 0,
  custPoints: 0,
  salemanPoints: 0,
});

//获取列表接口----page..接受实参
async function getData(pageNo) {
  try {
    //接口获取
    const res = await api.cancelRecordDetailPage({
      pageNo: pageNo, //当前页
      pageSize: state.pageSize, //需要多少条数据
      batchno: state.batchno, // 批次号
    });
    //判断接口返回是否有值
    if (res.code === 0) {
      //判断是否为第一页
      const list = res.data.list?.map((ele) => {
        return {
          checked: false,
          statusName: state.statusTypeList[ele.status].statusName,
          statusType: state.statusTypeList[ele.status].statusType,
          ...ele,
        };
      });
      if (pageNo === 1) {
        state.scanList = list;
      } else {
        //拼接数据concat
        state.scanList = state.scanList.concat(list);
      }
      state.pageNo = pageNo;
      state.total = res.data.total;
    } else {
      //否则置空
      state.scanList = [];
    }
  } catch (error) {
    //否则置空
    state.scanList = [];
    state.finished = true;
    state.loading = false;
  }
  return true;
}
async function onLoad() {
  if (state.refreshing) {
    state.scanList = [];
    state.pageNo = 1;
    state.refreshing = false;
  }
  await getData(state.pageNo);
  state.pageNo += 1;
  state.loading = false;
  if (state.scanList.length >= state.total) {
    state.finished = true;
  }
}

function onRefresh() {
  // 清空列表数据
  state.finished = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  state.loading = true;
  onLoad();
}

function onChecked(item, index) {
  state.scanList.forEach((ele) => {
    if (item.labelCode === ele.labelCode) {
      const bool = !ele.checked;
      if (bool) {
        state.labelCodes?.push(item.labelCode);
      } else {
        const idx = state.labelCodes.findIndex((ele) => ele === item.labelCode);
        state.labelCodes?.splice(idx, 1);
      }
      ele.checked = bool;
    }
  });
}
async function onCancelStatus() {
  showLoadingToast();
  try {
    const res = await api.cancelStatus({
      labelCodes: state.labelCodes,
    });
    if (res.code == 0) {
      state.showDialog = true;
      state.scanResultList = res.data;
    }
  } finally {
    closeToast();
    state.labelCodes = [];
  }
}

function onClose() {
  state.showDialog = false;
  state.refreshing = true;
  onLoad();
}

function handlepaly() {
  router.go(-1);
}

onMounted(() => {
  state.batchno = Number(route.query.batchno);
  state.cancelDate = Number(route.query.cancelDate);
  state.count = Number(route.query.count);
  state.custPoints = Number(route.query.custPoints);
  state.salemanPoints = Number(route.query.salemanPoints);
});
</script>
<style lang="less" scoped>
.my-time {
  padding: 16px;
  background-color: #f7f8fa;
  color: var(--cell-label-color, #969799);
}

.my-log-tips {
  font-size: 12px;
  text-align: center;
  color: var(--cell-label-color, #969799);
}

.my-cell-item {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.my-cell-top {
  padding-top: 10px;
}

.my-cell-bottom {
  padding-bottom: 10px;
}

.group-checked {
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
}

.group-checked_active {
  border-color: #1989fa;
}

:deep(.van-action-bar) {
  height: 110px;
  justify-content: center;
}
.footer {
  flex: 1;
  padding: 0 16px;
  text-align: center;
}
.scanResultList {
  max-height: 350px;
  overflow-y: auto;
}
</style>
